import React, {useState, useEffect } from 'react'
import axios from 'axios'
import { 
  Table, 
  Button, 
  Modal
} from 'antd';
import {
  AlignCenterOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';

const { confirm } = Modal;

export default function RoleList() {
  const [dataSource, setDataSource] = useState([])
  const columns = [
    {
      title: 'ID',
      align: 'center',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '角色名称',
      align: 'center',
      dataIndex: 'title'
    },
    {
      title: '操作',
      align: 'center',
      render: (item) => {
        return <div>
        <Button 
          style={{marginRight: '5px'}}
          type="primary" 
          shape="circle" 
          icon={<AlignCenterOutlined />} 
          size='middle' />
        <Button 
          type="ghost" 
          shape="circle" 
          icon={<DeleteOutlined />} 
          size='middle'
          onClick={() => showConfirm()}
          disabled={item.pagepermisson === undefined}
        />
      </div> 
      }
    }
  ]
  useEffect(() => {
    axios.get('/userList/queryUserList').then(response => {
      const {data} = response.data
      setDataSource(data)
    })
  }, [])

  function showConfirm() {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  return (
    <div>
       <Table 
        dataSource={dataSource} 
        columns={columns}
        rowKey={(item) => item.id}
      />
    </div>
  )
}
